<template>
    <div id="body-padding">
        <p id="p">更换密码</p>
        <div class="inp">
            <input 
                type="password" 
                placeholder="更换密码"
                v-model="psw"
            ><span class="fa fa-lock a "></span>
        </div>
        <div class="inp">
            <input 
                type="password"
                placeholder="再次输入密码"
                v-model="config"
            ><span class="fa fa-lock a "></span>
        </div>
        <button id="btn" @click="btnClick">更换密码</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
            psw:"",
            config:"",
        }
    },
    methods:{
        btnClick(){
            var reg = /^\w{3,16}$/;
            if(!reg.test(this.psw)){
                this.layer.msg("3-16位数字字母");
                return;
            }
            if(this.psw!=this.config){
                this.layer.msg("两次密码不一致");
                return;
            }
            var data = {
                psw:this.psw,
                code:this.$route.params.code,
            }
            this.http.post("/users/captcha",data)
            .then(res=>{
                if(res.data.err){
                    this.layer.alert("链接无效或者已经过期");
                }else{
                    this.layer.msg("更改成功");
                    window.location.href="http://localhost:8080/#/login";
                }
                
            })            
        },
        mount(){
            this.http.post("/users/captcha",{code:this.$route.params.code,yz:"区分请求"})
            .then(res=>{
                if(res.data.err==2){
                    this.layer.alert("链接无效或者已经过期");
                };
            })
        },
    },
    activated(){
        this.mount();
    }
}
</script>

<style scoped>
.inp{
    margin: 4px;
    margin-bottom: 10px;
    position: relative;
    border: solid 1px #999;
    border-radius: 3px;
    padding: 1px 8px;
    padding-left: 40px;
    
}
.inp input{
    outline:none;
    width: 100%;
    height: 32px;
    border: none;
    font-size: 14px;
}
.inp:hover{
    border: solid 1px #2D93E8;
    /*color: black !important;*/
}


.a{
    position: absolute;
    top: 8px;
    left: 12px;
    color: #777;
}
.user{
    left: 10px;
}

</style>